<template>
  <a-form ref="formStep1Ref" :model="form.formStep1" layout="vertical" :rules="rulesStep1" v-bind="layout">
    <a-collapse :default-active-key="activeKeys">
      <template #expandIcon="{ isActive }">
        <caret-right-outlined :rotate="isActive ? 90 : 0" />
      </template>
      <a-collapse-panel key="1" header="基本信息1">
        <a-row :gutter="16">
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoUserId" label="用户" has-feedback>
              <AvicCommonSelect
                v-model:value="form.formStep1.demoUserId"
                type="userSelect"
                placeholder="请选择用户"
                :default-show-value="form.formStep1.demoUserIdAlias"
                @callback="
                  (value) => {
                    form.formStep1.demoUserIdAlias = value.names;
                  }
                "
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoDeptId" label="部门">
              <AvicCommonSelect
                v-model:value="form.formStep1.demoDeptId"
                type="deptSelect"
                placeholder="请选择部门"
                :default-show-value="form.formStep1.demoDeptIdAlias"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoRoleId" label="角色">
              <AvicCommonSelect
                v-model:value="form.formStep1.demoRoleId"
                type="roleSelect"
                placeholder="请选择角色"
                :default-show-value="form.formStep1.demoRoleIdAlias"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoGroupId" label="群组">
              <AvicCommonSelect
                v-model:value="form.formStep1.demoGroupId"
                type="groupSelect"
                placeholder="请选择群组"
                :default-show-value="form.formStep1.demoGroupIdAlias"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoPositionId" label="岗位">
              <AvicCommonSelect
                v-model:value="form.formStep1.demoPositionId"
                type="positionSelect"
                placeholder="请选择岗位"
                :default-show-value="form.formStep1.demoPositionIdAlias"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="基本信息2">
        <a-row :gutter="16">
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoRadio" label="单选">
              <a-radio-group v-model:value="form.formStep1.demoRadio" :auto-focus="true">
                <a-radio v-for="item in lookupList?.PLATFORM_SEX" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoRadioButton" label="单选（按钮）">
              <a-radio-group v-model:value="form.formStep1.demoRadioButton" button-style="solid">
                <a-radio-button v-for="item in lookupList?.PLATFORM_CHECK_TYPE" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoCheckbox" label="复选">
              <a-checkbox-group v-model:value="form.formStep1.demoCheckbox">
                <a-checkbox v-for="item in lookupList?.PLATFORM_CHECK_TYPE" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoSelect" label="下拉">
              <a-select
                v-model:value="form.formStep1.demoSelect"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="children"
                :show-search="true"
                :allow-clear="true"
                placeholder="请选择下拉"
              >
                <a-select-option v-for="item in lookupList?.PLATFORM_DEGREE" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoSelectMultiple" label="下拉多选">
              <a-select
                v-model:value="form.formStep1.demoSelectMultiple"
                mode="multiple"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="children"
                :allow-clear="true"
                placeholder="请选择下拉多选"
              >
                <a-select-option v-for="item in lookupList?.PLATFORM_CHECK_TYPE" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="secretLevel" label="密级" has-feedback>
              <AvicSecretSelect
                v-model:value="form.formStep1.secretLevel"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="label"
                :show-search="true"
                :allow-clear="true"
                placeholder="请选择密级"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoSwitch" label="开关">
              <a-switch
                v-model:checked="form.formStep1.demoSwitch"
                checked-value="Y"
                un-checked-value="N"
                checked-children="有效"
                un-checked-children="无效"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoNumber" label="小数">
              <a-input-number
                v-model:value="form.formStep1.demoNumber"
                :min="0"
                :max="9999999999.99"
                :precision="2"
                :step="0.01"
                placeholder="请输入小数"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoInteger" label="整数">
              <a-input-number
                v-model:value="form.formStep1.demoInteger"
                :min="0"
                :max="999999999"
                :precision="0"
                :step="1"
                placeholder="请输入整数"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoDate" label="日期">
              <a-date-picker
                v-model:value="form.formStep1.demoDate"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoDateTime" label="日期时间">
              <a-date-picker
                v-model:value="form.formStep1.demoDateTime"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期时间"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </a-form>
</template>
<script lang="ts" setup>
import { useDemoMainNestForm, emits } from './ts/DemoMainNestForm'; // 引入表单ts

const props = defineProps({
  formId: {
    type: String,
    default: ''
  },
  form: {
    type: Object,
    default: null
  }
});
const emit = defineEmits(emits);
const activeKeys = ['1', '2'];
const { formStep1Ref, rulesStep1, layout, colLayout, lookupList } = useDemoMainNestForm({
  props,
  emit
});
defineExpose({
  formStep1Ref
});
</script>
